<template>
    <view class="page-container">
        <view class="or-header">
            <view class="back-btn" @click="goBack">
                <image :src="getFullImageUrl('@/static/index/Back.png')" style="width: 16rpx;height:28rpx;"></image>
            </view>
            <text>订单中心</text>
        </view>

        <!-- 主分类标签 - 新增接单订单/我的发布 -->
        <view class="main-tabs">
            <view class="main-tab-item" :class="{ active: currentMainTab === 'receive' }"
                @click="switchMainTab('receive')">接单订单</view>
            <view class="main-tab-item" :class="{ active: currentMainTab === 'my_posts' }"
                @click="switchMainTab('my_posts')">我的发布</view>
        </view>

        <!-- 订单状态标签页 -->
        <view class="order-tabs">
            <!-- 公共标签 - 全部 -->
            <view class="tab-item" :class="{ active: currentTab === 'all' }" @click="switchTab('all')">全部</view>

            <!-- 我的发布特有标签 -->
            <template v-if="currentMainTab === 'my_posts'">
                <view class="tab-item" :class="{ active: currentTab === 'pending' }" @click="switchTab('pending')">待接单
                </view>
                <view class="tab-item" :class="{ active: currentTab === 'accepted' }" @click="switchTab('accepted')">已接单
                </view>
                <view class="tab-item" :class="{ active: currentTab === 'inProgress' }"
                    @click="switchTab('inProgress')">进行中</view>
                <view class="tab-item" :class="{ active: currentTab === 'completed' }" @click="switchTab('completed')">
                    已结束</view>
                <view class="tab-item" :class="{ active: currentTab === 'cancelled' }" @click="switchTab('cancelled')">
                    已取消</view>
            </template>

            <!-- 接单订单特有标签 -->
            <template v-else>
                <view class="tab-item" :class="{ active: currentTab === 'accepted' }" @click="switchTab('accepted')">已接单
                </view>
                <view class="tab-item" :class="{ active: currentTab === 'inProgress' }"
                    @click="switchTab('inProgress')">进行中</view>

                <view class="tab-item" :class="{ active: currentTab === 'completed' }" @click="switchTab('completed')">
                    已结束</view>
                <view class="tab-item" :class="{ active: currentTab === 'cancelled' }" @click="switchTab('cancelled')">
                    已取消</view>
            </template>
        </view>

        <!-- 订单列表 -->
        <view class="order-list">
            <view class="order-item" v-for="(order, index) in orders" :key="index"
                v-if="order && (order.order_id || order.task_id)">
                <!-- 订单状态标签 -->
                <view :class="['order-status', getStatusClass(order.status)]">{{ order.status_text ||
                    getStatusText(order.status) }}</view>

                <view class="order-content">
                    <view class="order-header">
                        <image :src="getFullImageUrl(order.status_image)" class="status_image"></image>
                        <text class="order-title">{{ order.title }}</text>
                    </view>

                    <view class="order-info">
                        <view class="info-row">
                            <text class="people-info" v-if="order.people_num">{{ order.people_num }}</text>
                            <text class="people-info" v-if="order.time_range">{{ order.time_range }}</text>
                            <view class="people-info" v-if="order.person_info"> {{ order.person_info }}</view>
                            <view class="people-info" v-if="order.skill_desc">{{ order.skill_desc }}</view>
                        </view>
                    </view>


                    <view class="order-location">
                        <uni-icons type="location-filled" size="16"></uni-icons>
                        <text>{{ order.address }}</text>

                    </view>
                    <view class="order-location">
                        <text>{{ order.distance_info }}</text>
                        <image :src="getFullImageUrl('@/static/release/dh.png')" class="nav-btn"
                            @click="gotoNavigation(order)">
                        </image>
                    </view>
                    <view class="line"></view>

                    <view class="match-tip" v-if="order.status === 1 && order.match_tip">{{ order.match_tip }}</view>
                    <!-- 订单底部信息 -->
                    <view class="order-footer">
                        <view class="order-salary">
                            <text>酬金： {{ order.salary }}元</text>
                            <!-- <image :src="getFullImageUrl('@/static/release/rmb.png')" class="rmb-icon"></image> -->
                        </view>
                        <view class="order-actions">
                            <!-- 发布订单特有操作 -->
                            <template v-if="currentMainTab === 'my_posts'">
                                <!-- 待接单状态 (5) -->
                                <view v-if="order.status === 1" class="publish-actions">
                                    <button class="modify-btn" @click="() => modifyOrder(order)">修改内容</button>
                                    <button class="select-btn" v-if="order.match_tip"
                                        @click="() => selectFriend(order)">选择顾友</button>
                                </view>
                                <!-- 已接单(1)和进行中(2)状态 -->
                                <view v-if="order.status === 2 || order.status === 3" class="action-buttons">
                                    <view class="top-actions">
                                        <button class="cancel-btn" @click="cancelOrder(order.order_id)">取消订单</button>
                                        <view class="chat-btn" @click="order && gotoChat(order)">聊详情</view>
                                    </view>
                                </view>
                                <!-- 已结束状态 (3) -->
                                <button class="comment-btn" v-if="order.status === 4"
                                    @click="gotoComment(order)">去评论</button>
                                <!-- 已取消状态 (4) -->
                                <view class="compensation" v-if="order.status === 5">
                                    <text>{{ order.cancel_msg }}</text>
                                </view>
                            </template>

                            <!-- 接单订单原有操作 -->
                            <template v-else>
                                <!-- 已接单和进行中状态 - 统一按钮布局 -->
                                <view v-if="order.status === 2" class="action-buttons">
                                    <view class="top-actions">
                                        <button class="cancel-btn" @click="cancelOrder(order.order_id)">取消订单</button>
                                        <view class="chat-btn" @click="order && gotoChat(order)">聊详情</view>
                                    </view>
                                    <!-- 仅进行中状态显示滑动完成区域 -->
                                    <view class="slide-btn" v-if="order.status === 2">
                                        <movable-area class="slide-btn__area" :ref="'area_' + order.order_id"
                                            :class="['slide-btn__area-' + order.order_id, { active: order.thumbX > 0 }]" v-if="order && order.order_id">

                                            <movable-view class="slide-btn__thumb" direction="horizontal"
                                                :x="order.thumbX" @change="onSlide($event, order)"
                                                :disabled="order.isDisabled" :max-x="order.maxX">
                                                完成订单
                                                <image src="../../../static/image/xz11.png" class="right-icon" />
                                            </movable-view>
                                            <image src="../../../static/image/xz12.png" class="right-icon-mo" />
                                        </movable-area>
                                    </view>
                                </view>

                                <!-- 已完成状态 -->
                                <button class="comment-btn" v-if="order.status === 3"
                                    @click="gotoComment(order)">去评论</button>

                                <!-- 取消状态 -->
                                <view class="compensation" v-if="order.status === 4">
                                    <text>{{ order.cancel_msg }}</text>
                                </view>
                            </template>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 空状态 -->
            <view class="empty-state" v-if="orders.length === 0">
                <image src="/static/image/logo.jpg" class="empty-icon"></image>
                <text class="empty-text">当前暂无订单</text>
            </view>

            <!-- 加载更多 -->
            <view class="load-more" v-if="orders.length > 0">
                <view v-if="orders.length < total" class="loading-text">
                    <text>正在加载更多...</text>
                </view>
                <view v-else class="no-more-text">
                    <text>已经到底啦~</text>
                </view>
            </view>
        </view>

        <!-- 添加RecruitModal组件 -->
        <RecruitModal :show="showRecruitModal" :order="selectedOrder" @close="closeRecruitModal"
            @taskCancelled="fetchOrders" />

        <!-- 订单成功弹窗 -->
        <OrderSuccessModal :visible="showSuccessModal" :order="successOrderData" @close="closeSuccessModal"
            @order-success="handleOrderSuccess" />

        <!-- 订单修改模态框 -->
        <OrderModifyModal :show-modal="showModifyModal" :order-id="currentModifyOrderId" @update:show-modal="(value) => showModifyModal = value" @modify-success="handleModifySuccess" />
    </view>
</template>


<script src="./orderCenter.js"></script>
<style lang="scss" src="./orderCenter.scss"></style>